<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页UI配置管理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f6fa;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .header p {
            opacity: 0.9;
            font-size: 16px;
        }
        
        .content {
            padding: 30px;
        }
        
        .section {
            margin-bottom: 40px;
            border: 1px solid #e1e8ed;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .section-header {
            background: #f8f9fa;
            padding: 20px;
            border-bottom: 1px solid #e1e8ed;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        
        .section-toggle {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .toggle-switch {
            position: relative;
            width: 50px;
            height: 24px;
            background: #ccc;
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .toggle-switch.active {
            background: #4CAF50;
        }
        
        .toggle-switch::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: transform 0.3s;
        }
        
        .toggle-switch.active::after {
            transform: translateX(26px);
        }
        
        .section-content {
            padding: 20px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }
        
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .form-textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            min-height: 100px;
            resize: vertical;
        }
        
        .image-upload {
            border: 2px dashed #ddd;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.3s;
        }
        
        .image-upload:hover {
            border-color: #667eea;
        }
        
        .image-upload.has-image {
            border-style: solid;
            border-color: #4CAF50;
        }
        
        .image-preview {
            max-width: 200px;
            max-height: 150px;
            border-radius: 6px;
            margin-bottom: 10px;
        }
        
        .upload-text {
            color: #666;
            font-size: 14px;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: #667eea;
            color: white;
        }
        
        .btn-primary:hover {
            background: #5a6fd8;
        }
        
        .btn-success {
            background: #4CAF50;
            color: white;
        }
        
        .btn-success:hover {
            background: #45a049;
        }
        
        .btn-danger {
            background: #f44336;
            color: white;
        }
        
        .btn-danger:hover {
            background: #da190b;
        }
        
        .actions {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 30px;
        }
        
        .json-preview {
            background: #f8f9fa;
            border: 1px solid #e1e8ed;
            border-radius: 6px;
            padding: 20px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            max-height: 400px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>首页UI配置管理</h1>
            <p>动态配置首页各个区域的显示内容和样式</p>
        </div>
        
        <div class="content">
            <!-- 轮播图配置 -->
            <div class="section">
                <div class="section-header">
                    <div class="section-title">轮播图区域</div>
                    <div class="section-toggle">
                        <span>启用</span>
                        <div class="toggle-switch active" data-section="banner"></div>
                    </div>
                </div>
                <div class="section-content">
                    <div class="form-group">
                        <label class="form-label">轮播图高度</label>
                        <input type="text" class="form-input" value="500rpx" data-config="banner.height">
                    </div>
                    <div class="form-group">
                        <label class="form-label">自动播放间隔</label>
                        <input type="number" class="form-input" value="3000" data-config="banner.interval">
                    </div>
                    <div class="form-group">
                        <label class="form-label">轮播图项目</label>
                        <div id="banner-items">
                            <!-- 动态生成轮播图项目 -->
                        </div>
                        <button class="btn btn-primary" onclick="addBannerItem()">添加轮播图</button>
                    </div>
                </div>
            </div>
            
            <!-- 菜单配置 -->
            <div class="section">
                <div class="section-header">
                    <div class="section-title">菜单导航栏</div>
                    <div class="section-toggle">
                        <span>启用</span>
                        <div class="toggle-switch active" data-section="menu"></div>
                    </div>
                </div>
                <div class="section-content">
                    <div class="form-group">
                        <label class="form-label">菜单列数</label>
                        <input type="number" class="form-input" value="5" data-config="menu.columns">
                    </div>
                    <div class="form-group">
                        <label class="form-label">菜单项目</label>
                        <div id="menu-items">
                            <!-- 动态生成菜单项目 -->
                        </div>
                        <button class="btn btn-primary" onclick="addMenuItem()">添加菜单项</button>
                    </div>
                </div>
            </div>
            
            <!-- 广告魔方配置 -->
            <div class="section">
                <div class="section-header">
                    <div class="section-title">广告魔方</div>
                    <div class="section-toggle">
                        <span>启用</span>
                        <div class="toggle-switch active" data-section="adCube"></div>
                    </div>
                </div>
                <div class="section-content">
                    <div class="form-group">
                        <label class="form-label">左侧上方广告</label>
                        <div class="image-upload" data-upload="ad_left_top">
                            <div class="upload-text">点击上传图片</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">左侧下方广告</label>
                        <div class="image-upload" data-upload="ad_left_bottom">
                            <div class="upload-text">点击上传图片</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">右侧轮播广告</label>
                        <div class="image-upload" data-upload="ad_right_banner">
                            <div class="upload-text">点击上传图片</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 精选内容配置 -->
            <div class="section">
                <div class="section-header">
                    <div class="section-title">精选内容</div>
                    <div class="section-toggle">
                        <span>启用</span>
                        <div class="toggle-switch active" data-section="featured"></div>
                    </div>
                </div>
                <div class="section-content">
                    <div class="form-group">
                        <label class="form-label">区域标题</label>
                        <input type="text" class="form-input" value="精选内容" data-config="featured.headerTitle">
                    </div>
                    <div class="form-group">
                        <label class="form-label">精选项目</label>
                        <div id="featured-items">
                            <!-- 动态生成精选项目 -->
                        </div>
                        <button class="btn btn-primary" onclick="addFeaturedItem()">添加精选项</button>
                    </div>
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="actions">
                <button class="btn btn-success" onclick="saveConfig()">保存配置</button>
                <button class="btn btn-primary" onclick="previewConfig()">预览配置</button>
                <button class="btn btn-danger" onclick="resetConfig()">重置配置</button>
            </div>
            
            <!-- JSON预览 -->
            <div class="form-group">
                <label class="form-label">配置JSON预览</label>
                <div class="json-preview" id="json-preview">
                    <!-- JSON内容将在这里显示 -->
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局配置对象
        let uiConfig = {};
        
        // 初始化配置
        function initConfig() {
            // 这里可以从服务器加载配置，或者使用默认配置
            uiConfig = {
                pageConfig: {
                    title: "首页",
                    backgroundColor: "#f5f6fa"
                },
                sections: [
                    {
                        id: "banner",
                        type: "banner",
                        title: "轮播图区域",
                        enabled: true,
                        config: {
                            height: "500rpx",
                            interval: 3000
                        },
                        data: {
                            items: [
                                {
                                    id: 1,
                                    title: "昆明游，租车更自由！",
                                    imageUrl: "",
                                    uploadKey: "banner_1"
                                }
                            ]
                        }
                    }
                    // 其他区域配置...
                ]
            };
            
            renderConfig();
        }
        
        // 渲染配置到界面
        function renderConfig() {
            // 渲染轮播图项目
            renderBannerItems();
            // 渲染菜单项目
            renderMenuItems();
            // 渲染精选项目
            renderFeaturedItems();
            // 更新JSON预览
            updateJsonPreview();
        }
        
        // 渲染轮播图项目
        function renderBannerItems() {
            const container = document.getElementById('banner-items');
            const bannerSection = uiConfig.sections.find(s => s.id === 'banner');
            
            if (bannerSection && bannerSection.data.items) {
                container.innerHTML = '';
                bannerSection.data.items.forEach((item, index) => {
                    const itemDiv = document.createElement('div');
                    itemDiv.className = 'form-group';
                    itemDiv.innerHTML = `
                        <div style="display: flex; gap: 10px; align-items: center;">
                            <input type="text" placeholder="标题" value="${item.title || ''}" 
                                   onchange="updateBannerItem(${index}, 'title', this.value)">
                            <div class="image-upload" style="flex: 1;" data-upload="banner_${item.id}">
                                <div class="upload-text">上传图片</div>
                            </div>
                            <button class="btn btn-danger" onclick="removeBannerItem(${index})">删除</button>
                        </div>
                    `;
                    container.appendChild(itemDiv);
                });
            }
        }
        
        // 添加轮播图项目
        function addBannerItem() {
            const bannerSection = uiConfig.sections.find(s => s.id === 'banner');
            if (bannerSection) {
                const newId = Math.max(...bannerSection.data.items.map(i => i.id)) + 1;
                bannerSection.data.items.push({
                    id: newId,
                    title: "",
                    imageUrl: "",
                    uploadKey: `banner_${newId}`
                });
                renderBannerItems();
            }
        }
        
        // 删除轮播图项目
        function removeBannerItem(index) {
            const bannerSection = uiConfig.sections.find(s => s.id === 'banner');
            if (bannerSection) {
                bannerSection.data.items.splice(index, 1);
                renderBannerItems();
            }
        }
        
        // 更新轮播图项目
        function updateBannerItem(index, field, value) {
            const bannerSection = uiConfig.sections.find(s => s.id === 'banner');
            if (bannerSection && bannerSection.data.items[index]) {
                bannerSection.data.items[index][field] = value;
                updateJsonPreview();
            }
        }
        
        // 渲染菜单项目
        function renderMenuItems() {
            // 类似轮播图的实现
        }
        
        // 渲染精选项目
        function renderFeaturedItems() {
            // 类似轮播图的实现
        }
        
        // 更新JSON预览
        function updateJsonPreview() {
            const preview = document.getElementById('json-preview');
            preview.textContent = JSON.stringify(uiConfig, null, 2);
        }
        
        // 保存配置
        function saveConfig() {
            // 发送到服务器保存
            fetch('/api/home/ui-config', {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(uiConfig)
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    alert('配置保存成功！');
                } else {
                    alert('配置保存失败：' + data.msg);
                }
            })
            .catch(error => {
                console.error('保存失败:', error);
                alert('保存失败，请重试');
            });
        }
        
        // 预览配置
        function previewConfig() {
            // 在新窗口打开预览页面
            const previewWindow = window.open('', '_blank');
            previewWindow.document.write(`
                <html>
                <head><title>配置预览</title></head>
                <body>
                    <h1>配置预览</h1>
                    <pre>${JSON.stringify(uiConfig, null, 2)}</pre>
                </body>
                </html>
            `);
        }
        
        // 重置配置
        function resetConfig() {
            if (confirm('确定要重置所有配置吗？')) {
                initConfig();
            }
        }
        
        // 图片上传处理
        function handleImageUpload(uploadKey, file) {
            const formData = new FormData();
            formData.append('file', file);
            formData.append('uploadKey', uploadKey);
            formData.append('type', 'home-ui');
            
            fetch('/api/upload/image', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    // 更新配置中的图片URL
                    updateImageUrl(uploadKey, data.data.url);
                    alert('图片上传成功！');
                } else {
                    alert('图片上传失败：' + data.msg);
                }
            })
            .catch(error => {
                console.error('上传失败:', error);
                alert('上传失败，请重试');
            });
        }
        
        // 更新图片URL
        function updateImageUrl(uploadKey, url) {
            // 遍历所有区域，找到对应的uploadKey并更新URL
            uiConfig.sections.forEach(section => {
                if (section.data && section.data.items) {
                    section.data.items.forEach(item => {
                        if (item.uploadKey === uploadKey) {
                            item.imageUrl = url;
                        }
                    });
                }
                // 处理嵌套的数据结构
                if (section.data && section.data.leftAds) {
                    Object.values(section.data.leftAds).forEach(item => {
                        if (item.uploadKey === uploadKey) {
                            item.imageUrl = url;
                        }
                    });
                }
                if (section.data && section.data.rightAds) {
                    Object.values(section.data.rightAds).forEach(items => {
                        if (Array.isArray(items)) {
                            items.forEach(item => {
                                if (item.uploadKey === uploadKey) {
                                    item.imageUrl = url;
                                }
                            });
                        }
                    });
                }
            });
            updateJsonPreview();
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initConfig();
            
            // 绑定图片上传事件
            document.addEventListener('click', function(e) {
                if (e.target.closest('.image-upload')) {
                    const uploadDiv = e.target.closest('.image-upload');
                    const uploadKey = uploadDiv.dataset.upload;
                    
                    const input = document.createElement('input');
                    input.type = 'file';
                    input.accept = 'image/*';
                    input.onchange = function(event) {
                        const file = event.target.files[0];
                        if (file) {
                            handleImageUpload(uploadKey, file);
                        }
                    };
                    input.click();
                }
            });
            
            // 绑定开关切换事件
            document.addEventListener('click', function(e) {
                if (e.target.closest('.toggle-switch')) {
                    const toggle = e.target.closest('.toggle-switch');
                    const sectionId = toggle.dataset.section;
                    const isActive = toggle.classList.contains('active');
                    
                    toggle.classList.toggle('active');
                    
                    // 更新配置
                    const section = uiConfig.sections.find(s => s.id === sectionId);
                    if (section) {
                        section.enabled = !isActive;
                        updateJsonPreview();
                    }
                }
            });
        });
    </script>
</body>
</html>

